<template>
  <div class="container">
    <!-- 炫酷标签筛选器 -->
    <CoolFilter 
      v-model="selectedTags" 
      :tags="tags"
      @change="handleFilterChange"
    />

    <!-- 瀑布流布局 -->
    <MasonryLayout 
      :items="filteredCards" 
      :loading="loading" 
      :noMore="noMore"
      @load-more="loadMore"
    >
      <template #item="{ item }">
        <ContentCard :item="item" :tags="tags" />
      </template>
    </MasonryLayout>
  </div>

  <!-- 回到顶部按钮 -->
  <BacktopWithText />
</template>

<script setup lang="ts">
import { ref, computed, onMounted, markRaw } from 'vue';
import type { Ref } from 'vue';
import CoolFilter from '@/components/CoolFilter.vue';
import MasonryLayout from '@/components/MasonryLayout.vue';
import ContentCard from '@/components/ContentCard.vue';
import BacktopWithText from '@/components/BacktopWithText.vue';
import { CoffeeCup, Brush, TrendCharts, FirstAidKit, Notebook, Film, Basketball, MapLocation } from '@element-plus/icons-vue';
import type { Component } from 'vue';
import { commonLoadMore, getIconComponent } from '@/utils';
import { getHomeContent, getSelectTag } from '@/utils/api';
import type { Tag, CardItem } from '@/@types/home';

// 标签数据
const icons = {
  CoffeeCup,
  Brush,
  TrendCharts,
  FirstAidKit,
  Notebook,
  Film,
  Basketball,
  MapLocation
}
const selectedTags = ref<string[]>([]);
const tags = ref<Tag[]>([]);

// 内容卡片数据
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const cards = ref<CardItem[]>([]);

// 模拟数据
const mockCards = [];

// 初始化数据
onMounted(async () => {
  try {
    // 从API获取数据
    const res = await getHomeContent();
    cards.value = res.data.data || [];
    // 从API获取标签数据
    const tagRes = await getSelectTag();
    tags.value = tagRes.data.data.map((tag: Tag) => ({
      ...tag,
      icon: getIconComponent(icons, tag.icon)
    }));
  } catch (error) {
    console.error('获取数据失败:', error);
  }
})

// 根据标签筛选卡片
const filteredCards = computed(() => {
  if (selectedTags.value.length === 0) {
    return cards.value;
  }
  return cards.value.filter((card: CardItem) =>
    card.tags.some(tag => selectedTags.value.includes(tag))
  );
});

// 筛选变化处理
const handleFilterChange = (newTags: string[]) => {
  console.log('筛选条件变化:', newTags);
};


// 加载更多数据
const loadMore = () => {
  commonLoadMore({
    dataList: cards,
    page,
    loading,
    noMore,
    //dataGenerator是负责生成分页数据的工厂函数
    //当用户滚动触底时，系统会调用该函数生成新数据
    //若需要空数据状态，返回空数组dataGenerator: () => []
    dataGenerator: (pageNum: number, currentLength: number) => [...Array(50)].map((_, i) => ({
      id: i + 1,
      image: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
      title: 'ukactive Flame Conference 2015',
      description: 'We thoroughly enjoyed attending last week\'s ukactive\'s Flame Conference: the UK\'s leading event for health, fitness and physical activity...',
      author: 'Judy Brittie',
      date: '25th June 2015',
      category: '新闻',
      tags: ['tech', 'business'],
      views: 124,
      likes: 5
    })),
    maxPage: 3,
    delay: 1000
  });
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>